<template>
  <TwoDialog :id="id" :modelValue="modelValue" :title="form.id ? '修改询盘' : '新增询盘'" width="600px" @submit="handlerSave(formRef)" @close="close" @minimize="emit('update:modelValue', false)">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="auto">
      <el-form-item label="询盘备注" prop="inquiryRemark">
        <el-input v-model="form.inquiryRemark" placeholder="仅供自己查看" />
      </el-form-item>
      <el-form-item label="产品编号" prop="extCode">
        <el-input v-model="form.extCode" />
      </el-form-item>
      <el-form-item label="产品名称" prop="referenceName">
        <el-input v-model="form.referenceName" />
      </el-form-item>
      <el-form-item label="数量" prop="num">
        <el-input type="number" v-model="form.num" />
      </el-form-item>
      <el-form-item label="交期" prop="deliveryTime">
        <el-date-picker v-model="form.deliveryTime" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
      </el-form-item>
      <el-form-item v-if="!form.id" label="类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="1" :value="1">采购员询价</el-radio>
          <el-radio :label="2" :value="2">自己询价</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="	参考图片/文件" prop="referenceImg">
        <el-upload :http-request="customUpload" v-model:file-list="fileList" :on-remove="handleRemove"
          style="width: 100%">
          <i class="iconfont icon-plus" />
        </el-upload>
      </el-form-item>
      <el-form-item label="其他信息" prop="remark">
        <el-input type="textarea" v-model="form.remark" />
      </el-form-item>
    </el-form>
  </TwoDialog>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { ElMessage } from 'element-plus';
import api from '/@/api/email/index';
import { customUploadMultiple } from '/@/utils/upload';
import type { FormInstance } from 'element-plus'

import type { UploadProps } from 'element-plus'

defineProps({
  id: {
    type: String,
    default: ''
  },
  modelValue: {
    type: Boolean,
    required: true
  }
})
const emit = defineEmits(['update:modelValue', 'close']);
const fileList = ref<any>([]);

const formRef = ref<FormInstance>()

const form = ref({
  id: undefined,
  clientId: undefined,
  inquiryRemark: "",
  extCode: "",
  referenceName: "",
  type: 1,
  referenceImg: <any>[],
  deliveryTime: "",
  remark: "",
  num: 1,
});

const rules = ref({
  extCode: [
    { required: false, message: '请输入外部编号', trigger: 'blur' }
  ],
  referenceName: [
    { required: true, message: '请输入产品名称', trigger: 'blur' }
  ],
  num: [
    { required: true, message: '请输入数量', trigger: 'blur' }
  ],
  referenceImg: { required: computed(() => form.value.type === 1), message: '请输入参考图', trigger: 'blur' }
})

const customUpload = async (e: any) => {
  const { file } = e;
  const res: any = await customUploadMultiple([file]);
  form.value.referenceImg.push(res[0].url);
}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const close = () => {
  formRef.value?.resetFields();
  emit('update:modelValue', false);
  emit('close');
}

const handlerSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      const obj = { ...form.value }
      obj.referenceImg = obj.referenceImg.join(',')
      if (form.value.id) {
        api.inquiry.updateInquiry(obj).then((res: { code: number; }) => {
          if (res.code === 200) {
            ElMessage({ type: 'success', message: '修改成功' });
            close()
          }
        })
      } else {
        api.inquiry.addProductCollect(obj).then((res: { code: number; }) => {
          if (res.code === 200) {
            ElMessage({ type: 'success', message: '操作成功' });
            close()
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
};

defineExpose({
  form,
  fileList
})

</script>